<mwl-demo-utils-calendar-header
  [(view)]="view"
  [(viewDate)]="viewDate"
  (viewDateChange)="fetchEvents()"
  (viewChange)="fetchEvents()"
/>

@if (events$ | async; as events) {
<div>
  <div>
    @switch (view) { @case ('month') {
    <mwl-calendar-month-view
      [viewDate]="viewDate"
      [events]="events"
      [activeDayIsOpen]="activeDayIsOpen"
      (dayClicked)="dayClicked($event.day)"
      (eventClicked)="eventClicked($event.event)"
    />
    } @case ('week') {
    <mwl-calendar-week-view
      [viewDate]="viewDate"
      [events]="events"
      (eventClicked)="eventClicked($event.event)"
    />
    } @case ('day') {
    <mwl-calendar-day-view
      [viewDate]="viewDate"
      [events]="events"
      (eventClicked)="eventClicked($event.event)"
    />
    } }
  </div>
</div>
} @else {

<div class="text-center">
  <i class="fas fa-spin fa-spinner fa-5x"></i> <br />
  Loading events...
</div>

}
